<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理页面</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>
姓名<input type="text" name="name">
<button class="btn btn-info search">搜索</button>
<button class="btn btn-primary addUser">新增</button>
<button class="btn btn-danger batchdelete">批量删除</button><br><br><br>
<table class="table">
    <thead>
        <tr>
            <th><input type="checkbox" id="parent">全选</th>
            <th>昵称</th>
            <th>真实姓名</th>
            <th>电话号码</th>
            <th>身份证</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<!-- 新增Modal -->
<div class="modal fade" id="addUserInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="myModalLabel">填写用户信息</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="name">昵称</label>
                        <input type="text" class="form-control" id="name" placeholder="name">
                    </div>
                    <div class="form-group">
                        <label for="pwd">密码</label>
                        <input type="password" class="form-control" id="pwd" placeholder="pwd">
                    </div>
                    <div class="form-group">
                        <label for="telephone">电话号码</label>
                        <input type="text" class="form-control" id="telephone" placeholder="telephone">
                    </div>
                    <div class="form-group">
                        <label for="cardId">身份证</label>
                        <input type="text" class="form-control" id="cardId" placeholder="cardId">
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" class="form-control" id="email" placeholder="email">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addUser">确定</button>
            </div>
        </div>
    </div>
</div>

<!--修改用户信息modal-->
<div class="modal fade bs-example-modal-lg" id="updateUserInfo" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="">修改用户信息</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label for="name2" class="col-sm-2 control-label">昵称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name2">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pwd2" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="pwd2">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name2" class="col-sm-2 control-label" style="display: block">状态</label>
                        &emsp;&emsp;<label class="radio-inline">
                        <input type="radio" name="state" value="0"> 启用
                    </label>
                        &emsp;&emsp;<label class="radio-inline">
                        <input type="radio" name="state"  value="1"> 禁用
                    </label>
                    </div>
                    <div class="form-inline">
                        &emsp;&emsp;
                        <div class="form-group">
                            <label for="trueName2">姓名&emsp;</label>
                            <input type="text" class="form-control" id="trueName2">
                        </div>
                        &emsp;&emsp;
                        <div class="form-group">
                            <label for="cardId2">卡号&emsp;</label>
                            <input type="text" class="form-control" id="cardId2">
                        </div>
                    </div>
                    <div class="form-group"></div>
                    <div class="form-inline">
                        &emsp;&emsp;
                        <div class="form-group">
                            <label for="email2">邮箱&emsp;</label>
                            <input type="text" class="form-control" id="email2">
                        </div>
                        &emsp;&emsp;
                        <div class="form-group">
                            <label for="telephone2">电话&emsp;</label>
                            <input type="text" class="form-control" id="telephone2">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="qqId2" class="col-sm-2 control-label">QQ</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="qqId2">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="question2" class="col-sm-2 control-label">找回问题</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="question2">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="answer2" class="col-sm-2 control-label">找回答案</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="answer2">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateUser">确定</button>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function () {
        function get_user(name) {
            $.ajax({
                type:"get",
                data:{"name":name},
                url:"http://localhost:8080/CrudDemo_Web_exploded/selectuser",
                //询问是同步请求还是异步请求，同步请求根据代码先执行先写的Ajax，异步请求互不干扰
                async:true,//true是异步请求，false是同步请求
                //ajax执行之前的回调函数
                beforeSend:function(){

                },
                //ajax执行成功的回调函数
                success:function (res) {
                    if (res.code==0){
                        var list = res.data;
                        $("tbody").empty();
                        //遍历数组
                        $.each(list,function (index,obj) {
                       var tr = $(`<tr>
                            <td><input type="checkbox" class="children" data-id="${obj.id}"></td>
                            <td>${obj.name}</td>
                            <td>${obj.trueName}</td>
                            <td>${obj.telephone}</td>
                            <td>${obj.cardId}</td>
                            <td>${obj.email}</td>
                            <td>
                            <button class="btn btn-info updateUser" data-id="${obj.id}">修改</button>
                                <button class="btn btn-danger delete" data-id="${obj.id}">删除</button>
                                </td>
                                </tr>`);
                       tr.appendTo("tbody");
                        });
                    } else {
                        alert(res.message);
                    }
                },
                //ajax执行失败的回调函数
                fail:function (res) {
                }
            })
        }
        get_user(null);
        $(".search").click(function () {
            var name = $("input[name='name']").val();
            get_user(name);
        });
        //动态删除
        $(document).on("click",".delete",function () {
            // var ids = $(this).attr("data-id");
            var ids=$(this).data("id");
            var flag = confirm("您确定要删除吗?");
            if (flag==true){
                deleteuser(ids);
            }
        })
        function deleteuser(ids) {
            $.ajax({
                type:"post",
                url:"http://localhost:8080/CrudDemo_Web_exploded/deleteuser",
                data:{"id":ids},
                success:function (res) {
                    if (res.code==0){
                        alert(res.message);
                        location.reload();
                    } else{
                        alert(res.message);
                    }
                }
            });
        }
        //实现全选，反选效果
        $("#parent").click(function () {
           if ($(this).is(":checked")){
               //             给当前节点绑定原生属性,特有属性用prop，普通属性用attr
               $(".children").prop("checked",true);
           }  else {
               $(".children").prop("checked",false);
           }
        });
        $(".batchdelete").click(function () {
            //选中了多少条
            var count=0;
            //选中的元素取出id值拼接ids
            var ids = "";
            $(".children").each(function (index,obj) {
                if ($(this).is(":checked")){
                    count++;
                    ids+=$(this).data("id")+",";
                }
            });
            if (confirm(`您确定要删除${count}条记录吗!`)){
                ids = ids.substring(0,ids.length-1);
                console.log(ids);
                deleteuser(ids);
            }
        });
        //使用模态框做新增和修改

        //点击新增显示模态框
        $(".addUser").click(function () {
            $("#addUserInfo").modal('show');
        })
        //发送用户信息
        $("#addUser").click(function () {
            var name=$("#name").val();
            var pwd=$("#pwd").val();
            var telephone=$("#telephone").val();
            var cardId=$("#cardId").val();
            var emial=$("#email").val();
            // var garams =
            $.ajax({
                type:"post",
                data:{
                    "name":name,
                    "pwd":pwd,
                    "telephone":telephone,
                    "cardId":cardId,
                    "email":emial
                },
                url:"http://localhost:8080/CrudDemo_Web_exploded/adduser",
                success:function (res) {
                    if (res.code==0){
                        alert(res.message);
                        $("#addUserInfo").modal('hide');
                        location.reload();
                    }else {
                        alert(res.message);
                    }
                }
            })
        })
        //修改用户信息
        $(document).on("click",".updateUser",function () {
            $("#updateUserInfo").modal('show');
            var id=$(this).data("id");
            sessionStorage.setItem("id",id);
            $.ajax({
                type:"get",
                data:{"id":id},
                url:"http://localhost:8080/CrudDemo_Web_exploded/selectuserbyid",
                success:function (res) {
                    if (res.code==0){
                        var userInfo=res.data;
                        //将用户信息放到userInfo里
                        $.each(userInfo,function (index,obj) {
                            $("#name2").val(obj.name);
                            $("input[name='state']").each(function (index) {
                                if ($("input[name='state']").get(index).value==obj.state){
                                    $("input[name='state']").get(index).checked=true;
                                }
                            })
                            $("#trueName2").val(obj.trueName);
                            $("#cardId2").val(obj.cardId);
                            $("#email2").val(obj.email);
                            $("#telephone2").val(obj.telephone);
                            $("#qqId2").val(obj.qqId);
                            $("#question2").val(obj.question);
                            $("#answer2").val(obj.answer);
                        })

                    }else{
                        alert(res.message)
                    }
                }
            })
        })
        $("#updateUser").click(function () {
            var name=$("#name2").val();
            var state=$("input[name='state']:checked").val();
            var trueName=$("#trueName2").val();
            var cardId=$("#cardId2").val();
            var email=$("#email2").val();
            var telephone=$("#telephone2").val();
            var qqId=$("#qqId2").val();
            var question=$("#question2").val();
            var answer=$("#answer2").val();
            var id=sessionStorage.getItem("id",id);
            $.ajax({
                type:"post",
                data:{
                    "name":name,
                    "state":state,
                    "trueName":trueName,
                    "cardId":cardId,
                    "email":email,
                    "telephone":telephone,
                    "qqId":qqId,
                    "question":question,
                    "answer":answer,
                    "id":id
                },
                url:"http://localhost:8080/CrudDemo_Web_exploded/updateuser",
                success:function (res) {
                    if (res.code==0){
                        alert(res.message);
                        $("#updateUserInfo").modal('hide');
                        location.reload();
                    }else{
                        alert(res.message);
                    }
                }
            })
        })
    })
</script>
</body>
</html>